<template>
    <div class="big">
        <div class="one">
            <span class="text-top">猜你喜欢</span>
            </div>
        <div class="box" v-for="(v,i) in arr" :key="i" :taxt="v.data">
            <div class="img">
                <img :src="v.img" alt="">
            </div>
            <div class="text">
                <span class="text-1">{{v.top}}</span>
                <span class="p3">[{{v.root}}]{{v.top}}</span>
                <span class="money">
                    <span class="p1">{{v.money1}}</span>
                    
                    <span class="p2">门市价:{{v.money2}}</span>
                    </span>
            </div>
        </div>
    </div>
</template>

<script>
import getLink from "@/api/getindex.js"
export default {
    data(){
        return {
            arr:[]
            }
    },
    created(){
         getLink("/mock/data/index2").then(res => {
    this.arr =res.data;
    })
    }
}
</script>

<style scoped>
.p3{
    color: rgba(153, 153, 153, 0.993);
    font-size: 0.2rem;
    margin-top: 2%;
}
.p1{
    color: orange;
    font-size: 0.3rem;
}
.p2{
    font-size: 0.2rem;
    line-height: 0.4rem;
    margin-left: 5%;
    color: rgba(153, 153, 153, 0.993);
}
.money{
    margin-top: 25%;
    font-size: 0.2rem;
    display: flex;
}
.text{
    margin-top: 4%;
    display: flex;
    flex-direction: column;
}
.text-1{
    font-size: 0.3rem;
}
.box{
margin: 2%;
border-top:1px solid #9999; 
display: flex;

}
.img{
    margin-top: 4%;
    margin-right: 4%;
}
img{
    width: 100%;
    height: 2rem;
    
}
.text-top{
    margin: 2%;
    font-size: 0.35rem;
    margin-bottom: 2rem

}

.big{
    margin-top: 2%;
    margin-bottom: 15%;
}
</style>
